// 
import React, { Component, createRef } from 'react'
// 引入子组件
import Myclasschild from '../components/Myclasschild'
// 定义props 的数据类型,定义的是当前组件的props属性对象, 就是当前组件接收的父传子的props参数对象
type Props = {}
// 定义当前组件自身的state 的数据类型对象
interface State {
    username: string,
    age: number

}

// type 和interface 区别:
// 01: interface 只能定义对象数据类型 , type 可以定义任意数据类型
// 02: interface 可以实现类型的继承,type 不能,
// 03: interface 如果声明相同的数据类型名称会自动合并, 而type 报错


export default class MyClass extends Component<Props, State> {
    state = {
        username: '王海涛',
        age: 20
    }
    ref1 = createRef<HTMLInputElement>();
    changeageFn = () => {
        this.setState({
            age: this.state.age + 10
        })
    }
    render() {
        return (
            <div>
                <p onClick={() => {
                    this.changeageFn()
                }}>{this.state.username}--{this.state.age}</p>
                {/* 受控表单/受控组件 */}
                <p>
                    <input type="text" value={this.state.username} onChange={(e) => {
                        this.setState({
                            username: e.target.value
                        })
                    }} />
                </p>
                {/* 非受控表单/受控组件 通过dom 来获取表单中的value */}
                <p>
                    <input ref={this.ref1} type="text" defaultValue={this.state.username} />
                    <button onClick={() => {
                        //es7语法: 可选链方式: 对象?.属性?.属性?.
                        // 第一种方式: 
                        console.log(this.ref1?.current?.value)

                        // 第二种方式: 类型断言 已确定类型是某一个具体的类型
                        console.log((this.ref1.current as HTMLInputElement).value)
                    }}>提交表单</button>
                </p>
                {/* 使用子组件 */}
                <Myclasschild age={this.state.age} username={this.state.username} changeageFn={this.changeageFn}></Myclasschild>
            </div>
        )
    }
}